<template>
  <q-page :padding="!$q.platform.is.mobile">
      <q-list separator :no-border="$q.platform.is.mobile" class="q-mb-lg" >

        <q-item class="relative-position">
          <q-item-main> 
            <q-btn size="small" dense color="secondary" icon="mdi-settings" label="同步设置到同影片的其他场次" @click="duplicate" />
          </q-item-main>
        </q-item>
        <q-item-separator />
        <q-list-header class="row">
          <span class="col">参考影片</span>
          <span class="col-auto text-primary">
              <q-btn size="small"  dense  color="primary" icon="add" label="添加影片" @click="modal1=true" />
          </span>
        </q-list-header>
        <q-item class="relative-position" v-for="(item,idx) in movies" :key="'event_movie_'+idx">
            <q-item-main> 
                <q-item-tile label>{{idx+1}}、<a :href="'https://movie.douban.com/subject/'+item.movieId+'/'" target="_blank">{{item.movieName}}</a></q-item-tile>                
            </q-item-main>
            <q-item-side right>
                <q-btn flat dense icon="close" @click="delMovie(item, idx)" />
            </q-item-side>
        </q-item>
        <q-item v-if="movies.length == 0">
          <q-item-main label>暂未设置任何参考影片</q-item-main>
        </q-item><!-- movie -->

        <q-item-separator />

        <q-list-header class="row">
          <span class="col">相关艺人</span>
          <span class="col-auto text-primary">
              <q-btn size="small" dense  color="primary" icon="add" label="添加艺人" @click="modal2=true" />
          </span>
        </q-list-header>
        <q-item class="relative-position" v-for="(item,idx) in actors" :key="'event_actor_'+idx">
            <q-item-main> 
                <q-item-tile label>{{idx+1}}、<a :href="'https://movie.douban.com/celebrity/'+item.actorId+'/'" target="_blank">{{item.actorName}}</a></q-item-tile>                
            </q-item-main>
            <q-item-side right>
                <q-btn flat dense icon="close" @click="delActor(item, idx)" />
            </q-item-side>
        </q-item>
        <q-item v-if="actors.length == 0">
          <q-item-main label>暂未设置任何相关艺人</q-item-main>
        </q-item><!-- actor -->
        
      </q-list>

      <!-- modal -->
    <q-modal v-model="modal1" :position="$q.platform.is.mobile?'':'right'" :maximized="$q.platform.is.mobile">      
      <q-tabs align="justify" inverted style="min-height:800px;">
        <q-tab slot="title" name="tab-1" label="搜索添加" default />
        <q-tab slot="title" name="tab-2" label="手工添加" />
        <q-tab-pane name="tab-1" class="q-pa-none">
          <q-list dense no-border class="q-pa-none">
            <q-btn class="float-right" flat round icon="mdi-close" @click="modal1=false"/>
            <q-list-header></q-list-header>
            <q-item>
              <q-search icon="mdi-account-search" class="full-width" :value="queryMovie" color="primary" 
                placeholder="通过影片名称搜索影片" autofocus="true"
                @change="searchMovie" />
            </q-item>
            <q-item v-if="resultMovies.length==0 && queryMovie.length>0">
              <q-item-main><b class="text-primary">没有符合条件的影片...</b></q-item-main>
            </q-item>
            <q-item v-for="item in resultMovies" :key="'search_user_'+item.id">
              <q-item-main>
                <q-item-tile label>{{ item.name }} ({{item.releaseDate}})</q-item-tile>
                <q-item-tile sublabel v-if="item.score>0">评分:{{item.score/10}}, 评价人数:{{item.ratingCount}}</q-item-tile>
                <q-item-tile sublabel v-if="item.score<=0">想看人数:{{item.wishCount}}</q-item-tile>
              </q-item-main>
              <q-item-side right>
                <q-btn flat round color="primary" icon="mdi-plus" @click="addMovie(item)"/>
              </q-item-side>
            </q-item>
          </q-list>
        </q-tab-pane>
        <q-tab-pane name="tab-2" class="q-pa-none">
          <q-list dense no-border class="q-pa-none">
            <q-btn class="float-right" flat round icon="mdi-close" @click="modal1=false"/>
            <q-list-header></q-list-header>
            <q-item>
              <q-input class="full-width"  v-model="input.id" placeholder="影片ID(必填)" />
            </q-item>
            <q-item>
              <q-input class="full-width"  v-model="input.name" placeholder="影片名称(必填)" />
            </q-item>
            <q-item>
              <q-btn color="primary" class="full-width q-my-sm" icon="mdi-plus" label="添加" @click="addMovie(input)" />
            </q-item>
          </q-list>
        </q-tab-pane>
      </q-tabs>
    </q-modal>

      <!-- modal -->
    <q-modal v-model="modal2" :position="$q.platform.is.mobile?'':'right'" :maximized="$q.platform.is.mobile">  
        <q-toolbar color="primary">
            <q-toolbar-title>添加艺人</q-toolbar-title>
            <q-btn flat round dense icon="mdi-close" @click="modal2=false" />
        </q-toolbar>    
        <q-list dense no-border class="q-pa-none">
            <q-list-header></q-list-header>
            <q-item>
              <q-input class="full-width"  v-model="input.id" placeholder="影人ID(必填)" />
            </q-item>
            <q-item>
              <q-input class="full-width"  v-model="input.name" placeholder="影人名称(必填)" />
            </q-item>
            <q-item>
              <q-btn color="primary" class="full-width q-my-sm" icon="mdi-plus" label="添加" @click="addActor(input)" />
            </q-item>
          </q-list>
    </q-modal>

  </q-page>
</template>

<style>
</style>

<script>
import MyEventToolbar from "../components/MyEventToolbar.vue";
import MyEventInfo from "../components/MyEventInfo.vue";

export default {
  name: 'PageEventSetting',
  components: { MyEventToolbar, MyEventInfo },
  data () {
    return {
        modal1: false,
        modal2: false,

      movies:[],
      actors:[],
      input:{
          id:'',
          name:'',
          actorId:'',
          actorName:''
      },

      queryMovie:'',
      resultMovies:[]
    }
  },
  mounted() {
    let me = this;
    this.$api.ui.pageBackBtn = function(){
      me.$router.push('/event');
    }
    this.loadData();
  },
  methods: {
      loadData() {
        let me = this;
        let eventId = me.$route.params.id;
        this.$api.party.loadSettingMovies(eventId, res=>{
            me.movies = res.data.model;
        });

        this.$api.party.loadSettingActors(eventId, res=>{
            me.actors = res.data.model;
        });
      },
      addMovie(item) {
          let eventId = this.$route.params.id;
          this.movies.push({
              "movieId":item.id,
              "movieName":item.name
          });
          this.$api.party.insertSettingMovie(eventId, item.id, item.name, res=>{});

          this.input.id = '';
          this.input.name = '';
          this.modal1 = false;
          this.queryMovie = '';
      },
      delMovie(item, idx) {
          let eventId = this.$route.params.id;
          this.movies.splice(idx, 1);
          this.$api.party.deleteSettingMovie(eventId, item.movieId, res=>{});
      },
      addActor(item) {
          let eventId = this.$route.params.id;
          this.actors.push({
              "actorId":item.id,
              "actorName":item.name
          });
          this.$api.party.insertSettingActor(eventId, item.id, item.name, res=>{});

          this.input.id = '';
          this.input.name = '';
          this.modal2 = false;
          //this.queryActor = '';
      },
      delActor(item, idx) {
          let eventId = this.$route.params.id;
          this.actors.splice(idx, 1);
          this.$api.party.deleteSettingActor(eventId, item.actorId, res=>{});
      },
      searchMovie(val) {
        this.queryMovie = val;
        this.resultMovies = [];
        if(this.queryMovie) {
            let me = this;
            this.$api.movie.searchMovie(val, res=>{
                me.resultMovies = res.data.model;
            });
        }
      },
      duplicate() {
        let me = this;
        let eventId = this.$route.params.id;
        this.$api.party.duplicateSetting(eventId, res=>{
              me.$q.notify({
                message: '设置同步完成',
                type: 'positive',
                color: 'positive',
                icon: 'mdi-check'
              });
        });
      }
  }
}
</script>
